<style>
  .tab {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #000;
  }
  .tab > header {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    width: 100%;
    background-color: #ccc;
  }
  .tab > header > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 50px;
    line-height: 50px;
    border: 1px solid #000;
    border-bottom: none;
    border-top: none;
  }
  .tab > header > span:nth-child(2) {
    width: 100%;
  }
  .tab > header > span:first-child {
    width: 100%;
    border-left: none;
  }
  .tab > header > span:last-child {
    width: 100%;
    border-right: none;
  }
</style>
<div id="root">
  <div class="tab" style="overflow-x: hidden">
    <header>
      <span
        v-for="(value, index) in nav"
        :style="{background:cur===index?'#fff':'',color:cur===index?'#000':''}"
        @mouseenter="cur=index"
        :key="index"
        >{{value}}</span
      >
    </header>
    <article>
      <section
        v-for="(item, index) in tabContent"
        :key="item.index"
        v-show="cur===item.index"
      >
        <component
          :is="'news'+item.name"
          :data="item.content"
          :url="item.imgUrl"
        ></component>
      </section>
    </article>
  </div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>

<script type="module">
  const { createApp } = Vue;
  import tab from "./v3-v2.js";
  import createComponents from "./v3-v3-components.js";
  const App = {
    setup() {
      return {
        ...tab(),
      };
    },
  };
  const app = createApp(App);
  createComponents(app);
  app.mount("#root");
</script>
